<template>
	<div>

		<Hearder title="相册管理" listName="相册列表"></Hearder>


		<el-button type="primary" @click="pojo= {} , formVisible = true">上传图片</el-button>
		<el-button @click="$router.go(-1)">返回</el-button>
		<el-row>
			<el-col :span="3" v-for="(item, i) in 17" :key="i" style="padding: 5px;">
				<el-card>
					<el-image
					style="width: 100px; height: 100px"
					:src="url"
					:fit="cover">
				</el-image>
					<div>
						
						<div class="bottom clearfix">
							<el-button type="text" class="button" @click="edit(item.id)">编辑</el-button>
							<el-button type="text" class="button" @click="dele(item.id)">删除</el-button>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 分頁 -->
		<el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="fetchData"
		@size-change="fetchData"
		:current-page.sync="currentPage"
		>
	</el-pagination>
	<!--弹出窗口-->
	<el-dialog  title="编辑" :visible.sync="formVisible" >
		<el-form label-width="80px">
			<el-form-item label="选择相册">
				<el-select v-model="pojo.albumId" placeholder="请选择">
					<el-option
					v-for="item in albumList"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="选择图片">
			<el-upload
			class="avatar-uploader"
			action="/api/upload/oss.do?folder=brand"
			:show-file-list="false"
			:on-success="handleAvatarSuccess"
			>
			<!-- 显示图片 -->
			<img v-if="pojo.image" :src="pojo.image" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		</el-upload>
	</el-form-item>


	<el-form-item>
		<el-button type="primary" @click="save()">保存</el-button>
		<el-button @click="formVisible = false" >关闭</el-button>
	</el-form-item>
</el-form>
</el-dialog>
</div>
</template>

<script>
	export default {


		data(){
			return {
				tableData: [],
				albumList: [],
				currentPage: 1,
				total: 10,
				pageSize: 10,
				searchMap: {},
				pojo: {},
				formVisible: false,
				imageUrl: ''
			}
		},
		created(){
			this.fetchData();
		},
		methods:{
			fetchData (){
				axios.post(`/album/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response => {
					this.tableData = response.data.rows;
					this.total = response.data.total;
				});
			},
			save (){
                // this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
                axios.post(`/album/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
                    this.fetchData (); //刷新列表
                    this.formVisible = false ;//关闭窗口
                });
            },
            edit (id){
                this.formVisible = true // 打开窗口
                // 调用查询
                axios.get(`/album/findById.do?id=${id}`).then(response => {
                	this.pojo = response.data;
                    // this.imageUrl=this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele (id){
            	this.$confirm('确定要删除此记录吗?', '提示', {
            		confirmButtonText: '确定',
            		cancelButtonText: '取消',
            		type: 'warning'
            	}).then( () => {
            		axios.get(`/album/delete.do?id=${id}`).then(response => {
                        this.fetchData (); //刷新列表
                    })
            	})
            },

            async handleAvatarSuccess(res){
            	console.log(res)

          // 由于改变 对象的属性个数  vue 无法及时的渲染  使用使用该方法 第二次遇到该问题
          this.$set(this.pojo,'image',res)
          //  给model 添加一个iocn 属性   
          // this.model.icon = res.url
      },
          //獲取模板列表
          async getTemplateList() {
          	const res = await this.$http.get('/api/');
          	this.albumList = res.data
          },
      }
  }   
</script>

<!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 150px;
	height: 70px;
	line-height: 70px;
	text-align: center;
}
.avatar {
	width: 150px;
	height: 70px;
	display: block;
}
.el-icon-plus:before {
	line-height: 70px;
}

</style>